import $ from "jquery"

export default class Banner{
    constructor(val){
        this.name = "Banner";

        this.autoplay = val.autoplay;
        this.distant = val.distant;

        this.$banner = $(".J_banner");
        this.$banList = this.$banner.find(".banner-list");
        this.$banItem = this.$banList.children(".banner-item");
        this.banInd = 0;

        console.log(this.$banItem)
    }

    init(){
        this.autoPlay && this.autoPlay(); /*让进行运行的时候才会进行*/
    }

    autoPlay(){
        this.trime = setInterval($.proxy(this.run,this),this.distant);
        // $.proxy 改变this指向
    }
    run(){
        this.slideAction("next");
    }
    slideAction(dir){ /*进行滚动*/
        let t = null;
        switch(dir){
            case 'next':
                if(this.banInd === (this.$banItem.length-1)){
                    this.banInd = 1;
                    this.setSlide(this.banInd,dir,true);

                    t = setTimeout(()=>{
                        this.setSlide(this.banInd,dir,false);
                        clearTimeout(t);
                    },100);
                }else{
                    this.banInd ++;
                    this.setSlide(this.banInd,dir,false);
                }
                break;
            case 'prev':
                if(this.banInd === 0){
                    this.banInd = this.$banItem.length-1;
                    this.setSlide(this.banInd,dir,true);

                    t = setTimeout(()=>{
                        this.setSlide(this.banInd,dir,false);
                        clearTimeout(t);
                    },100);
                }else{
                    this.banInd --;
                    this.setSlide(this.banInd,dir,false);
                }
                break;
            default:
                break;
        }
    }

    setSlide(index,dir,isInitial){
        this.$banList.css({
            transform:`translate3d(${isInitial?(dir === "next"? 0 : -(this.$banItem.length-1)*710):-index*710}px,0px,0px)`,
            transitionDuration:`${isInitial?'initial':'.5s'}`
        })
    }

}
